<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="用户名" prop="Member_Name">
      <el-input v-model="ruleForm.Member_Name" />
    </el-form-item>

    <el-form-item label="密码" prop="Member_Pwd">
      <el-input type="password" v-model="ruleForm.Member_Pwd" />
    </el-form-item>

    <el-form-item label="会员手机号" prop="Member_Phone">
      <el-input  v-model="ruleForm.Member_Phone" />
    </el-form-item>

    <el-form-item label="身份证号" prop="Member_IdCard">
      <el-input  v-model="ruleForm.Member_IdCard" />
    </el-form-item>

     <el-form-item label="出生日期" required>
      <el-col :span="11">
        <el-form-item prop="Member_BirthDay">
          <el-date-picker
            v-model="ruleForm.Member_BirthDay"
            type="date"
            aria-label="Pick a date"
            placeholder="请选择出生日期"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>

     <el-form-item label="积分" prop="Member_Score">
      <el-input  v-model="ruleForm.Member_Score" />
    </el-form-item>

     <el-form-item label="余额" prop="Member_Money">
      <el-input  v-model="ruleForm.Member_Money" />
    </el-form-item>

    <el-form-item label="会员等级" prop="Member_LevelId">
      <el-select v-model="ruleForm.Member_LevelId" placeholder="请选择会员等级">
        <el-option label="--请选择--" value="" />
        <el-option v-for="item in MemberLevelList" :label="item.levelName" :value="item.id" />
      </el-select>
    </el-form-item>

     <el-form-item label="性别">
      <el-radio-group v-model="ruleForm.Member_Gender">
        <el-radio :value="true">男</el-radio>
        <el-radio :value="false">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="角色">
      <el-checkbox-group v-model="ruleForm.RoleArray">

        <el-checkbox v-for="item in RoleList" :value="item.role_Id" name="type">
          {{ item.role_Name }}
        </el-checkbox>

      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import {useRoute} from 'vue-router'

const route=useRoute();
alert(route.params.mID);

const ruleFormRef = ref<FormInstance>()

//响应式数据
const ruleForm = reactive({
  Member_Name: '',
  Member_Pwd: '',
  Member_Phone: '',
  Member_IdCard: '',
  Member_BirthDay: '',
  Member_Score: '',
  Member_Money: '',
  Member_LevelId: '',
  Member_Gender: true,
  Role_Id:'',
  RoleArray:[]
})

//相应式数据(保存等级信息)
const MemberLevelList = ref([{
    id:0,
    levelName:''
}]);

//相应式数据(保存角色信息)
const RoleList = ref([{
    role_Id:0,
    role_Name:''
}]);

//表单验证
const rules = reactive<FormRules>({
  Member_Name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 10, message: '用户名需介于2-10个字符之间', trigger: 'blur' },
  ],
   Member_Pwd: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ],
  Member_LevelId: [
    {
      required: true,
      message: '请选择会员等级',
      trigger: 'change',
    },
  ],
  Member_Phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号', trigger: 'blur' },
  ],
  Member_IdCard: [
    { required: true, message: '身份证号码不能为空', trigger: 'blur' },
    {pattern:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号码', trigger: 'blur' },
  ]
})

//数据提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {  
      axios.post('/api/Members/AddMember',ruleForm,
      {
        params:{
          roleList:ruleForm.RoleArray.toString()
        }
      })
      .then(res=>{
        console.log(res.data);
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(()=>{
  LoadMemberLevel();

  LoadRoleInfo();
  LoadData();
})

//加载会员等级
const LoadMemberLevel=()=>{
  axios.get('/api/Members/GetMemberLevelList')
  .then(res=>{
      MemberLevelList.value=res.data.data;
  })
}

//加载角色
const LoadRoleInfo=()=>{
  axios.get('api/Members/ShowRoleInfo')
  .then(res=>{
      RoleList.value=res.data.data;
  })
}

//加载数据
const LoadData=()=>{
  // 加载会员信息
    axios.get('/api/Members/GetMemberItem',{params:{id:route.params.mID}})
    .then(res=>{
      console.log(res.data.data);
      ruleForm.Member_Name=res.data.data.member_Name;

      //调用加载角色信息
      LoadRoleName(res.data.data.member_Id);
    })

}

 //加载角色信息
const LoadRoleName=(mId:string)=>{
 axios.get('/api/Members/GetMemberRoleInfo',
      {
        params:{
          mid:mId
        }
      })
    .then(res=>{
      //将字符串类型的参数转换为数组？？？
      ruleForm.RoleArray=res.data.data.split(',').map((item:string)=>Number(item));
       console.log(ruleForm.RoleArray);
    })

}

</script>
